<template>
  <div class="store-manage">
    <el-form :inline="true" :model="searchFormData" class="demo-form-inline">
      <el-form-item label="关键字">
        <el-input v-model="searchFormData.name" placeholder="请输入设备编号/名称" clearable/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="init">查询</el-button>
      </el-form-item>
    </el-form>
    <el-button style="margin-bottom: 10px;" type="primary" @click="handleAdd(row)">
      新增
    </el-button>
    <el-table :data="tableData" border empty-text="暂无数据">
      <el-table-column prop="no" label="编号"/>
      <el-table-column prop="name" label="设备名称"/>
      <el-table-column prop="categoryName" label="类别"/>
      <el-table-column prop="status" label="状态">
        <template #default="{ row }">
          <div>{{ row.status == 1 ? "可用" : "不可用" }}</div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" align="center" label="操作" width="120">
        <template #default="{ row }">
          <el-button link type="primary" @click="handleUpdate(row)">
            修改
          </el-button>
          <el-button link type="danger" @click="handleDel(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <el-dialog v-model="dialogVisible" :title="title" width="400">
    <el-form :inline="true" :rules="rules" ref="formDataRef" :model="formData" label-width="100px">
      <el-form-item label="编号" prop="no" style="width: 300px;">
        <el-input v-model="formData.no" placeholder="请填写" clearable/>
      </el-form-item>
      <el-form-item label="设备名称" prop="name" style="width: 300px;">
        <el-input v-model="formData.name" placeholder="请填写" clearable/>
      </el-form-item>
      <el-form-item label="类别" prop="categoryName" style="width: 300px;">
        <el-input v-model="formData.categoryName" placeholder="请填写" clearable/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="savaData">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="js" setup>
import {ref, onMounted} from 'vue'
import {ElMessageBox, ElMessage} from 'element-plus'
import axios from 'axios'

let searchFormData = ref({})

let formData = ref({})
let formDataRef = ref(null)
let title = ref('新增')
let tableData = ref([{no: 'no.1', name: "电子计算器", categoryName: "电子计算器", status: "1"}])
let dialogVisible = ref(false)
// 效验
const rules = {
  no: [{required: true, message: '编号不能为空', trigger: 'blur'}],
  name: [{required: true, message: '设备名称不能为空', trigger: 'blur'}],
  categoryName: [{required: true, message: '类别不能为空', trigger: 'blur'}],
}

// 新增
const handleAdd = () => {
  title.value = '新增'
  formData.value = {}
  dialogVisible.value = true
}
// 修改
const handleUpdate = (row) => {
  title.value = '修改'
  formData.value = row
  dialogVisible.value = true
}

// 删除
const handleDel = (row) => {
  console.log(row)
  ElMessageBox.confirm(
      '是否确定删除，警告?',
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    console.log('删除接口')
    ElMessage
    axios({
      method: "get", // POST GET
      url: "http://localhost:48080/facility/facility/delete",
      params: {id: row.id}
    }).then(res => {
      ElMessage({
        type: 'success',
        message: `操作成功`,
      })
      init()
      console.log(res);
    });
  })
}
// 修改
const savaData = () => {
  formDataRef.value.validate(valid => {
    if (!valid) return
    if (formData.value.id) {
      console.log('修改接口')
      axios({
        method: "POST", // POST GET
        url: "http://localhost:48080/facility/facility/update",
        data: formData.value,
      }).then(res => {
        ElMessage({
          type: 'success',
          message: `操作成功`,
        })
        dialogVisible.value = false
        init()
        console.log(res);
      });
    } else {
      console.log('新增接口')
      axios({
        method: "POST", // POST GET
        url: "http://localhost:48080/facility/facility/create",
        data: formData.value,
      }).then(res => {
        ElMessage({
          type: 'success',
          message: `操作成功`,
        })
        dialogVisible.value = false
        init()
        console.log(res);
      });
    }
  })
}
const init = () => {
  axios({
    method: "POST", // POST GET
    url: "http://localhost:48080/facility/facility/list",
    data: searchFormData.value,
  }).then(res => {
    let {data} = res || {}
    tableData.value = data.data
  });

}
onMounted(() => {
  //  需要调用加 init()
  init()
})
</script>

<style scoped>
.store-manage {
  /* background: red; */
  padding: 10px;
}
</style>